<template>
	<view class="container-nav">
		<view class="w-nav">
			<view class="nav-title" @click="onClkTitle(0)">
				<text :class="{'nav-focus':active==0}">发起提交</text>
			</view>
			<view class="nav-title" @click="onClkTitle(1)">
				<text :class="{'nav-focus':active==1}">查看数据</text>
			</view>
		</view>
		<view class="nav-body" v-show="active==0">

			<view class="w-box">
				<view class="w-box-row">
					<view class="row-later-title">
						<view class="later-title-dot">*</view>
						<view>补卡时间</view>
					</view>
					<view class="row-later-time">
						{{later_time}}
					</view>
				</view>
			</view>

			<view class="w-box">
				<view class="w-box-row">
					<view class="row-later-title">
						<view class="later-title-dot">*</view>
						<view>补卡理由</view>
					</view>
					<view class="row-later-time">
						<editor placeholder="请输入" id="s_editor" @input="onLaterTime"></editor>
					</view>
				</view>
			</view>

			<view class="w-btns">
				<button type="primary" :disabled="blnDisabled_w" @click="onAddClockinInfo">提交</button>
			</view>
		</view>

		<view class="nav-body" v-show="active==1">
			<view class="w-box" v-for="(item,index) in items" :key="index" @click.stop="onNavTo(item.ID)">
				<view class="w-box-title">
					<view class="w-box-title-img">会员</view>
					<view>
						<view class="w-box-title-header">
							{{item.Employee_Name}}提交的补卡申请
						</view>
						<view class="w-box-title-dt">
							补卡理由：{{item.Note}}
						</view>
						<view class="w-box-title-dt">
							补卡时间：{{_retFormatDate(item.ClockTime)}}
						</view>
						<view class="w-box-title-act">
							<view class="act-status">
								{{item.FlowStatus_Name}}
							</view>
						</view>
					</view>
					<view class="w-box-title-org">
						{{_retFormatYmdt(item.Createtime)}}
					</view>
				</view>
			</view>
			<view class="w-box" v-show="items.length==0">
				目前还没有找到补卡申请！
			</view>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				items: [],
				active: 0,
				later_time: "",
				c_id: 0,
				c_cls: -1,
				source:"",
				Note: "",
				blnDisabled_w: true
			}
		},
		methods: {
			onNavTo(id) {
				if (id) {
					uni.navigateTo({
						url: "./ClockinInfo?id=" + id
					})
				} else {
					uni.showToast({
						title: "正在开发中..."
					})
				}
			},
			_retFormatDate(v) {
				return v.substr(0, v.length - 3)
			},
			_retFormatYmdt(v) {
				return this.retFormatYmdt(v);
			},
			getClockinInfo(){
				// 准备请求数据
				let apiData = {
					url: pageApp.globalData.url + "/EmployeeClockinList",
					data: {
						"page": 1,
						"rows": 10,
						"ClockClass":1
					},
					success: (d) => {
						console.log("数据",d)
						if(d.data.code == "001"){
							this.items = d.data.data.items;
						}
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			},
			onLaterTime(e) {
				this.Note = e.detail.text;
				this.blnDisabled_w = this.checkIsEmpty(this.Note, "00000");
			},
			onClkTitle(e) {
				this.active = e;
				if(e){
					this.getClockinInfo();
				}
			},
			onAddClockinInfo() {
				//准备数据
				let apiData = {
					url: pageApp.globalData.url + "/ClockinNew",
					data: {
						"Employee": JSON.parse(uni.getStorageSync("userLoginData")).UserID,
						"ClockClass": this.c_cls,
						"Note": this.Note,
						"Workday": this.retFormatYmdt(this.later_time),
						"ClockTime": this.later_time,
						"ClockSchedulingID": this.c_id,
						"DepartmentID": JSON.parse(uni.getStorageSync("userLoginData")).DepartmentID,
						"OrgID": JSON.parse(uni.getStorageSync("userLoginData")).OrgID
					},
					method: "POST",
					success: (d) => {
						if (d.data.code == "001") {
							uni.showToast({
								icon: "success",
								title: "补卡成功！"
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:this.source
								})
							},1000)
						} else {
							uni.showToast({
								icon: "fail",
								title: "补卡失败！"
							})
						}
					}
				}
				//发送数据请求
				this.vjAjaxData(apiData);
			}
		},
		onLoad: function(options) {
			this.later_time = options.later_time;
			this.c_id = options.c_id;
			this.c_cls = options.c_cls;
			this.source = options.source;
			// console.log(this.later_time);			
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.container-nav {
		font-size: 14px;
		line-height: 24px;
	}

	.ql-container {
		height: 100rpx;
		min-height: 100rpx;
	}

	.w-nav {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 0;
	}

	.nav-focus {
		border-bottom: solid 6rpx #4497e1;
		padding-bottom: 20rpx;
	}

	.nav-title {
		width: 50%;
		text-align: center;
	}

	.nav-tip {
		position: relative;
		padding: 10rpx;
		display: flex;
		width: 100%;
		top: -30rpx;
		background-color: #4497e1;
		color: #ffffff;
		font-size: 26rpx;
		justify-content: space-around;
	}

	.w-box {
		margin: 20rpx 0;
		padding: 40rpx;
		background-color: #ffffff;
	}

	.row-later-title {
		display: flex;
		font-size: 34rpx;
	}

	.later-title-dot {
		padding: 8rpx;
		color: red;
	}

	.row-later-time {
		margin-left: 30rpx;
	}

	.w-box-title {
		display: flex;
		margin-bottom: 40rpx;
	}

	.w-box-title-img {
		width: 60rpx;
		height: 60rpx;
		padding: 4rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 16rpx;
		background-color: #4497e1;
		margin-right: 16rpx;
		margin-top: 10rpx;
		color: #ffffff;
		font-size: 24rpx;
	}

	.w-box-title-header {
		font-size: 34rpx;
		color: #000000;
		font-weight: 700;
	}

	.w-box-title-dt {
		font-size: 28rpx;
		line-height: 34rpx;
	}

	.w-box-title-org {
		position: absolute;
		margin-top: 16rpx;
		right: 40rpx;
	}

	.w-box-row {
		font-size: 30rpx;
		line-height: 36rpx;
	}
	
	.w-box-title-act {
		display: flex;
		justify-content: space-between;
	}
	
	.act-status {
		color: #E1B176
	}
	
	.w-box-row text {
		overflow: hidden;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 670rpx;
	}

	.w-btns {
		background-color: #ffffff;
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.w-btns button {
		width: 710rpx;
		margin-left: 0;
	}
</style>
